:root{
  --gold: #d4af37;
  --blush: #f8e6e0;
  --char: #2e2e2e;
  --muted: #6b6b6b;
  --bg: #ffffff;
  --radius: 12px;
  --container: 1180px;
  --transition: 250ms ease;
  --gap: 1.25rem;
  --max-width: 1200px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color-scheme: light;
}

/* Page loader */
.page-loader{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: linear-gradient(180deg, #fff, #fff);
  transition: opacity 360ms ease, visibility 360ms ease;
}
.page-loader[aria-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.loader-logo{
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}
.loader-text{color:var(--muted);font-weight:600;margin:0}
.spinner{
  width:60px;height:60px;border-radius:50%;position:relative;box-sizing:border-box;border:6px solid rgba(0,0,0,0.06);border-top-color:var(--gold);animation:spin 1s linear infinite;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media (max-width:720px){
  .loader-text{font-size:14px}
  .loader-logo{width:64px;height:64px}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--char);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Layout container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1rem;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(6px);
  background:linear-gradient(0deg, rgba(255,255,255,0.7), rgba(255,255,255,0.6));
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 0;
}

/* Brand */
.brand{
  display:flex;
  gap:0.6rem;
  align-items:center;
  text-decoration:none;
  color:var(--char);
}
.brand .logo{width:64px;height:64px;object-fit:cover;border-radius:8px}
.brand-text{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.2px;
}

/* Nav */
.main-nav ul{
  list-style:none;
  margin:0;padding:0;display:flex;gap:1rem;align-items:center
}
.main-nav a{
  text-decoration:none;color:var(--char);padding:0.4rem 0.6rem;border-radius:8px;font-weight:500;
}
.main-nav a:hover{background:rgba(0,0,0,0.03)}

/* Mobile close button inside nav - fixed so position is consistent across devices */
.nav-close {
  /* hidden by default on larger screens; shown when mobile nav is open */
  display: none;
  position: fixed; /* fixed to viewport to avoid shifting */
  top: 14px; /* comfortable tappable area from top */
  right: 14px; /* aligned to right edge consistently */
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.9);
  border: 0;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 2500; /* above nav overlay */
}
.nav-close svg{display:block}

/* show close button when mobile nav is opened */
.main-nav.open .nav-close{
  display:flex;
}

/* smaller variant for very narrow screens */
/* @media (max-width:420px){
  */

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 1rem;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:0;
}
.btn-primary{
  background:var(--gold);
  color:#111;
  box-shadow:0 6px 18px rgba(212,175,55,0.12);
  margin-right: 28px;
}
.btn-ghost{
  background:transparent;border:1px solid rgba(0,0,0,0.06);
  color:white;
}
.btn-outline{
  background:transparent;border:2px solid var(--char);color:var(--char);
}

/* Burger for mobile */
.burger{display:none;background:none;border:0;padding:6px}
.burger span{display:block;width:22px;height:2px;background:var(--char);margin:4px 0;border-radius:2px}

.burger {
    display: block;
    margin-left: 68px;
}
/* Hero */
.hero{
  padding: 0;
  background-color: black;
  
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 520px;
  gap:2rem;
  align-items:center;
}
.hero-title{
  font-family:'Playfair Display', serif;
  font-size:2.2rem;
  margin:0 0 0.75rem 0;
  letter-spacing:-0.02em;
  color: white;
}
.hero-title span{display:block;color:white;font-size:1.05rem;font-weight:500 }
.lead{color:white;margin-bottom:1.25rem}
.hero-media img{width:100%;height:auto;border-radius:18px;object-fit:cover;box-shadow:0 20px 40px rgba(46,46,46,0.06)}

/* Features */
.hero-features{display:flex;gap:1rem;list-style:none;padding:0;margin-top:1rem}
.hero-features li{background:var(--blush);padding:0.5rem 0.9rem;border-radius:999px;font-weight:600;font-size:0.9rem}

/* Sections */
.section{padding:3rem 0}
.section-header{text-align:center;margin-bottom:1.25rem}
.section-header h2{font-family:'Playfair Display', serif;font-size:1.55rem;margin:0}
.section-header p{color:var(--muted);margin:0.5rem 0}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:1.25rem;
}
.service-card{
  background:#fff;border-radius:14px;padding:0;overflow:hidden;border:1px solid rgba(0,0,0,0.04);text-align:left;
}
.service-card img{width:100%;height:180px;object-fit:cover;display:block}
.service-card h3{margin:0.8rem 1rem 0.25rem 1rem}
.service-card p{margin:0 1rem 1rem 1rem;color:var(--muted)}
.link-cta{display:inline-block;margin:0 1rem 1rem 1rem;color:var(--gold);text-decoration:none;font-weight:600}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 480px;gap:2rem;align-items:center}
.about-media img{width:100%;height:auto;border-radius:14px;object-fit:cover}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.6rem;
  margin-top:1rem;
}
.gallery-item{padding:0;border:0;background:transparent;border-radius:10px;overflow:hidden}
.gallery-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform var(--transition)}
.gallery-item:hover img{transform:scale(1.04)}

/* Testimonials */
.testimonials{padding:3rem 0;background:linear-gradient(180deg,#fff,#fbfbfb)}
.testimonials .section-header p{color:var(--muted)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.testimonial-card{background:#fff;border-radius:14px;padding:1.25rem 1rem;box-shadow:0 10px 30px rgba(46,46,46,0.06);border:1px solid rgba(0,0,0,0.04);text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.testimonial-card .avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:0.75rem}
.testimonial-card .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.testimonial-card blockquote{font-style:normal;color:var(--char);margin:0 0 0.5rem 0;position:relative;padding-left:1.25rem}
.testimonial-card blockquote:before{content:'“';font-size:2rem;color:var(--gold);position:absolute;left:0;top:-6px}
.testimonial-meta{font-weight:600;color:var(--muted);margin-top:auto}

@media (max-width:900px){
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .testimonials-grid{grid-template-columns:1fr}
  .testimonial-card{align-items:center;text-align:center}
  .testimonial-card .avatar{margin-bottom:1rem}
  .testimonial-card blockquote{padding-left:0}
  .testimonial-card blockquote:before{display:none}
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  visibility:hidden;
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  z-index:2000;
  padding:2rem;
  transition:opacity 220ms ease, visibility 220ms ease;
}
.lightbox.open{
  visibility:visible;
  opacity:1;
}
.lightbox img{max-width:92%;max-height:86%;border-radius:10px}
.lightbox-close{position:absolute;top:24px;right:24px;background:transparent;border:0;color:#fff;font-size:2.2rem;cursor:pointer}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 440px;gap:1.5rem;align-items:start}
.contact-card{background:#fff;padding:1.25rem;border-radius:12px;border:1px solid rgba(0,0,0,0.04)}
.form label{display:block;margin-bottom:0.75rem;font-weight:500;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;padding:0.75rem;border-radius:8px;border:1px solid rgba(0,0,0,0.08);margin-top:0.35rem}
.contact-info p{margin:0.45rem 0;color:var(--muted)}
.map-wrap{height:320px;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,0.04);margin-top:0.5rem}
.map-wrap iframe{width:100%;height:100%;border:0}

/* Footer */
.site-footer{background:#111;color:#fff;padding:1.5rem 0;margin-top:2rem}
.footer-grid{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.logo-footer{width:80px;display:block;margin-bottom:0.5rem}
.footer-links ul{list-style:none;padding:0;margin:0}
.footer-links a{color:inherit;text-decoration:none}

/* Sticky icons */
.sticky{
  position:fixed;right:18px;border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);z-index:1500;text-decoration:none;color:#fff
}
.whatsapp{bottom:92px;background:#25D366}
.call{bottom:22px;background:#2e2e2e}

/* Social links in contact/map area */
.socials{display:flex;gap:0.6rem;align-items:center;margin-top:0.75rem}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:linear-gradient(180deg,#fff,#f3f3f3);color:var(--char);text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)}
.social-btn svg{width:22px;height:22px}
.social-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,0.08)}

/* Brand color variants */
.social-btn.instagram{background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 80%);border:0;color:#fff}
.social-btn.facebook{background:#1877f2;border:0;color:#fff}
.social-btn.whatsapp-btn{background:#25D366;border:0;color:#fff}
.social-btn.instagram svg,.social-btn.facebook svg,.social-btn.whatsapp-btn svg{fill:currentColor}

/* responsive */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr 420px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .header-inner{padding:0.6rem 0 }
  .main-nav{display:none}
  .burger{display:block}
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .hero-title{font-size:1.6rem}
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .sticky{right:14px}
  .brand-text{font-size:1rem}

  /* Keep the nav list neutral on mobile; when opened, .main-nav.open rules control layout */
  .main-nav ul{background:transparent;gap:1rem}

  .main-nav ul {
    background: white;
    gap: 1rem;
    width: 150px;
    padding-bottom: 30px;
    /* margin-left: 206px; */
    position: absolute;
    right: 6px;
    top: 24px;
}
 .nav-close{ top:95px; right:20px; width:25px; height:25px; padding:5px 
}
}

/* Mobile menu open overlay (consistent across devices) */
.main-nav.open{
  position:fixed;
  inset:64px 0 0 0;
  background:#fff;
  padding:1.25rem 1rem;
  z-index:1200;
  display:block;
}
.main-nav.open ul{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  padding-top:0.75rem;
  align-items:flex-start;
}

/* Mobile nav open/close animations */
.main-nav.open ul .nav-opening,
.main-nav.open ul.nav-opening{
  animation: navSlideIn 320ms cubic-bezier(.2,.9,.3,1) forwards;
}
.main-nav.open ul .nav-closing,
.main-nav.open ul.nav-closing{
  animation: navSlideOut 260ms cubic-bezier(.4,.0,.2,1) forwards;
}

@keyframes navSlideIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes navSlideOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-12px)}
}

/* Hide burger button while nav is open (mobile) */
@media (max-width:720px){
  .main-nav.open ~ .nav-actions .burger,
  .main-nav.open + .nav-actions .burger{
    display:none !important;
  }
}

.main-nav.open {
  background: none;
}

/* cleaned duplicate .main-nav.open rule */